<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>丘北</title>
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/旅游景点_style.css" />
	</head>
	<body>
		<!-- 主体开始 -->
		<div class="shell" id="shell">
			<div class="header">
				<h2 class="title">丘北县旅游景点<a href="首页.html"><img src="../img/旅游景点/返回 (1).png"
							style="height: 60px;" /></a></h2>
				<h3 class="subtitle">places of interes</h3>
			</div>
			<div class="timeline">
				<div class="item" data-text="典型的喀斯特岩溶地貌">
					<div class="content">
						<img src="../img/旅游景点/清晨的普者黑湖.jpg" alt="" class="img">
						<h2 class="content-title">清晨普者黑湖</h2>
						<p class="content-desc">
							远山如黛 近水含烟<br>
							滇东南的普者黑如一幅曼妙的画卷 <br>
							与第一缕晨光触碰后缓缓舒展<br>
							高原水乡如梦似幻的韵味<br>
							写满悠远 足够震撼<br>
						</p>
					</div>
				</div>
				<div class="item" data-text="冬日湿地色彩斑斓美如画">
					<div class="content">
						<img src="../img/旅游景点/冬日湿地色彩斑斓美如画.jpg" alt="" class="img">
						<h2 class="content-title">普者黑湿地</h2>
						<p class="content-desc">
							冬日里，神州大地层林尽染、色彩斑斓，呈现冬日里别样的风景。
							初冬时节，文山壮族苗族自治州丘北县普者黑国家湿地公园内层峦叠嶂，山水林田湖草融为一体。
						</p>
					</div>
				</div>

				<div class="item" data-text="喀斯特湿地候鸟栖息地">
					<div class="content">
						<img src="../img/旅游景点/天鹅湖.jpg" alt="" class="img">
						<h2 class="content-title">天鹅湖景区</h2>
						<p class="content-desc">
							天鹅湖候鸟栖息地占地面积3平方千米，其中湿地面积2.6平方千米。
							天鹅湖内生物多样性丰富，湿地动物有鱼类、两栖类、爬行类、兽类及鸟类共200余种。
						</p>
					</div>
				</div>

				<div class="item" data-text="荷花仙子">
					<div class="content">
						<img src="../img/旅游景点/荷湖恋.jpg" alt="" class="img">
						<h2 class="content-title">万亩荷花</h2>
						<p class="content-desc">
							“接天莲叶无穷碧，映日荷花别样红”，每年的六、七、八月，
							是荷花盛开的季节，万亩荷塘中，成片成片的翠绿色点染着星星点点的粉红、
							白色，加上远处的小山，天空中的白云，构成了一幅清新亮丽的图画。
						</p>
					</div>
				</div>

				<div class="item" data-text="依山傍水，花田成海，风景秀丽、花香四溢">
					<div class="content">
						<img src="../img/旅游景点/玫瑰园日出.jpg" alt="" class="img">
						<h2 class="content-title">玫瑰园</h2>
						<p class="content-desc">
							普者黑玫瑰庄园位于文山壮族苗族自治州丘北县八道乡阿诺村普者黑国家湿地公园旁。
							被评为“全国休闲农业与乡村旅游示范点”“科普惠农示范点”，还被云南省科技厅认定为“科技示范园”。
						</p>
					</div>
				</div>

				<div class="item" data-text="一湖碧水，波光粼粼">
					<div class="content">
						<img src="../img/旅游景点/摆龙湖.jpg" alt="" class="img">
						<h2 class="content-title">摆龙湖（红旗水库）</h2>
						<p class="content-desc">
							摆龙湖位于丘北县曰者镇摆落大山脚下，属高原淡水湖泊，湖中两座大岛屿形似双龙摆尾，故称“摆龙湖”。<br />
							群山环抱蓝湖<br />
							蓝湖掩映绿岛<br />
							蔚为壮观<br />
						</p>
					</div>
				</div>

				<div class="item" data-text="水上田园、湖泊峰林、彝家水乡、岩溶湿地、荷花世界、候鸟天堂">
					<div class="content">
						<img src="../img/旅游景点/仙人洞除夕.jpg" alt="" class="img">
						<h2 class="content-title">仙人洞村</h2>
						<p class="content-desc">
							仙人洞村位于‌云南省‌文山壮族苗族自治州‌丘北县‌普者黑风景区的核心地带，全村仅198户，980人，是个典型的彝族撒尼人聚居村落。
						</p>
					</div>
				</div>
				
				<div class="item" data-text="登顶后的绝美风光">
					<div class="content">
						<img src="../img/旅游景点/青龙山落日.jpg" alt="" class="img">
						<h2 class="content-title">青龙山观落日</h2>
						<p class="content-desc">
							青龙山，古称清凉山，是一座陡峭险峻的孤峰，也是一处自然美景的绝佳之地。它坐落在文山壮族苗族自治州丘北县普者黑村西侧，拥有着壮丽的自然风光和丰富的生态资源。
						</p>
					</div>
				</div>

				<div class="item" data-text="高原上的草海与风车奇观">
					<div class="content">
						<img src="../img/旅游景点/舍得草场.jpg" alt="" class="img">
						<h2 class="content-title">舍得草场</h2>
						<p class="content-desc">
							“舍得”是彝语，含意是洼塘箐。<br />
							有着 小“香格里拉”的舍得彝族乡，有10万亩草场、白泥塘僰人文化生态村，羊雄山、华竹箐，有滑草场、跑马场、茶马古道等。
						</p>
					</div>
				</div>

				<div class="item" data-text="石漠化">
					<div class="content">
						<img src="../img/旅游景点/舍得石漠化.jpg" alt="" class="img">
						<h2 class="content-title">舍得国家石漠公园</h2>
						<p class="content-desc">
							云南丘北舍得国家石漠公园是2022年5月国家林业和草原局国家级自然公园评审委员会办公室拟批准新建的国家沙漠（石漠）公园。
						</p>
					</div>
				</div>
				
				<div class="item" data-text="文山州的小“阿勒泰”">
					<div class="content">
						<img src="../img/旅游景点/羊雄山.jpg" alt="" class="img">
						<h2 class="content-title">羊雄山</h2>
						<p class="content-desc">
							羊雄山海拔2502米<br />
							是六诏山脉在文山州境内的主峰
						</p>
					</div>
				</div>
				
				<div class="item" data-text="童话冰雪仙境">
					<div class="content">
						<img src="../img/旅游景点/舍得雪景.webp" alt="" class="img">
						<h2 class="content-title">舍得雪景</h2>
						<p class="content-desc">
							早晨起床<br />						
							一睁眼就能看到美丽的冰凌	<br />				
							冷若冰霜 <br />	
							却又动人心魄<br />	
							让人仿佛置身童话的世界<br />	
						</p>
					</div>
				</div>
				
				<div class="item" data-text="激情漂流">
					<div class="content">
						<img src="../img/旅游景点/官寨乡漂流.jpg" alt="" class="img">
						<h2 class="content-title">官寨乡漂流</h2>
						<p class="content-desc">
							在蜿蜒而下的5公里河道内，水流急缓交替，河道两傍原生植物古朴苍劲，河道内还另设了两大滑道，置身其中，能让你感受不一样的柔美与激情碰撞、人与自然和谐交融的壮乡风情风光👀。
						</p>
					</div>
				</div>
				
				<div class="item" data-text="生态">
					<div class="content">
						<img src="../img/旅游景点/官寨乡白马村.jpg" alt="" class="img">
						<h2 class="content-title">官寨乡白马村</h2>
						<p class="content-desc">
							稻浪与光影交错，绿意盎然，丰收在望。
						</p>
					</div>
				</div>
				
				<div class="item" data-text="奇特的钟乳石景观">
					<div class="content">
						<img src="../img/旅游景点/火把洞.jpg" alt="" class="img">
						<h2 class="content-title">普者黑火把洞</h2>
						<p class="content-desc">
							水面犹如镜子一般，去的时候是淡季，人少很安静，可以清楚的听到滴水的声音。
						</p>
					</div>
				</div>
				
				<div class="item" data-text="激情狂欢节 万人抹花脸">
					<div class="content">
						<img src="../img/旅游景点/花脸节.jpg" alt="" class="img">
						<h2 class="content-title">花脸节</h2>
						<p class="content-desc">
							每年农历二月第一个属蛇日<br />
							丘北各族群众与广大游客欢聚在椒莲广场，大家身着民族服装，用弦子舞、祝酒歌、霸王鞭、芦笙舞欢迎四方来宾。
						</p>
					</div>
				</div>
				
				<div class="item" data-text="万人狂欢打火把">
					<div class="content">
						<img src="../img/旅游景点/火把节.jpg" alt="" class="img">
						<h2 class="content-title">火把节之夜</h2>
						<p class="content-desc">
							8月10日(农历六月二十四)<br>
							丘北多地举行节庆活动共同庆祝彝族传统佳节火把节，夜幕降临，各地纷纷点燃篝火，载歌载舞，以“火”之名，共襄民族盛宴。
						</p>
					</div>
				</div>
				<div class="item" data-text="">
					<h2 class="content-title">&nbsp;</h2>
				</div>
				<div class="item" data-text="">
					<h2 class="content-title">&nbsp;</h2>
				</div>
				<div class="item" data-text="">
					<h2 class="content-title">&nbsp;</h2>
				</div>
				<!-- 滑动时间轴js效果实现开始 -->
				<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
				<script>
					(function($) {
						$.fn.timeline = function() {
							var selectors = {
								id: $(this),
								item: $(this).find(".item"),
								activeClass: "item--active",
								img: ".img"
							};
							// 将第一个时间轴项目激活，并设置时间轴背景图片为第一个项目的图片
							selectors.item.eq(0).addClass(selectors.activeClass);
							selectors.id.css(
								"background-image",
								"url(" +
								selectors.item.first()
								.find(selectors.img)
								.attr("src") +
								")"
							);
							// 获取时间轴项目的总数
							var itemLength = selectors.item.length;
							// 当页面滚动时，触发滚动事件
							$(window).scroll(function() {
								var max, min;
								// 获取页面滚动的距离
								var pos = $(this).scrollTop();
								selectors.item.each(function(i) {
									// 获取当前时间轴项目的最小和最大高度
									min = $(this).offset().top;
									max = $(this).height() + $(this).offset().top;
									var that = $(this);
									// 如果滚动到最后一个项目，并且超过了当前项目高度的一半，
									// 则将最后一个项目设置为激活状态，并设置背景图片为最后一个项目的图片
									if (i == itemLength - 2 && pos > min + $(this).height() / 2) {
										selectors.item.removeClass(selectors.activeClass);
										selectors.id.css(
											"background-image",
											"url(" +
											selectors.item.last()
											.find(selectors.img)
											.attr("src") +
											")"
										);
										selectors.item.last().addClass(selectors.activeClass);
									}
									// 如果当前滚动位置在当前项目的最小和最大高度之间，
									// 则将当前项目设置为激活状态，并设置背景图片为当前项目的图片
									else if (pos <= max - 10 && pos >= min) {
										selectors.id.css(
											"background-image",
											"url(" +
											$(this)
											.find(selectors.img)
											.attr("src") +
											")"
										);
										selectors.item.removeClass(selectors.activeClass);
										$(this).addClass(selectors.activeClass);
									}
								});
							});
						};
					})(jQuery)
					/*
					最后，我们调用 timeline 插件并传入时间轴的 ID 作为参数。
					这将启用时间轴插件并为该时间轴绑定滚动事件。
					*/
					$("#shell").timeline();
				</script>
				<!-- 滑动时间轴js效果实现结束 -->
				<!-- 主体结束 -->
				<!-- footer开始 -->
				<footer class="footer">
					&copy;小阳版权所有
					<h2>联系我</h2>
					<p>联系电话:15025264629</p>
					<p>邮箱：2382164305@qq.com</p>
					<p>地址：云南省文山州丘北县</p>
				</footer>
				<!--footer结束-->
			</div>
	</body>
</html>